<template>
  <scroll-view class="flex-col page mine" scroll-y @scroll="onPageScroll">
    <view class="flex-col section" :style="{ paddingTop: navHeight + 'px' }">
      <xlm-top-nav :scrollTop="scrollTop" title="我的优惠券" />
      <!-- 顶部tab -->
      <view class="tab-bar">
        <view class="tab-item" :class="{ active: tabIndex === 0 }" @click="tabChange('notuse')">未使用</view>
        <view class="tab-item" :class="{ active: tabIndex === 1 }" @click="tabChange('used')">已使用</view>
        <view class="tab-item" :class="{ active: tabIndex === 2 }" @click="tabChange('end')">已过期</view>
        <view class="tab-underline" :style="{ left: tabIndex * 33.33 + '%' }"></view>
      </view>

      <!-- 优惠券列表 -->
      <view v-for="(item, idx) in couponList" :key="idx" class="coupon-card" :class="item.status">
        <!-- 金额区 -->
        <view class="coupon-amount">
          <view class="amount">￥{{ item.discount_price }}</view>
          <view class="limit">满{{ item.small_price }}可用</view>
        </view>
        <!-- 信息区 -->
        <view class="coupon-info">
          <view class="coupon-title">{{ item.name }}</view>
          <view class="coupon-date">有效期：{{ formatTimeOnly(item.starttime) }} 至 {{ formatTimeOnly(item.endtime) }}</view>
          <button v-if="item.status === 'unused'" class="use-btn">去使用</button>
          <view v-if="item.status === 'expired'" class="corner-label expired">已过期</view>
          <view v-if="item.status === 'used'" class="corner-label used">已使用</view>
        </view>
      </view>
    </view>

  </scroll-view>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useOutsideAppStore } from '@/store/app'
  import { imgUrl } from '@/utils/config'
  import { onShow } from '@dcloudio/uni-app';
  import { formatTimeOnly } from '@/utils/dateUtils.js'
  import { useRequest } from '@/api';
  const { API_DISCOUNT_MY_POST } = useRequest();
  const appStore = useOutsideAppStore()
  const navHeight = computed(() => appStore.navHeight)
  const scrollTop = ref(0)
  const onPageScroll = (e) => {
    scrollTop.value = e.detail.scrollTop
  }
  const tabIndex = ref(0)
  const couponList = ref([
    // {
    //   amount: 20,
    //   limit: 100,
    //   title: '优惠券名称',
    //   date: '2025.12.12～2025.12.12',
    //   status: 'unused'
    // },
    // {
    //   amount: 20,
    //   limit: 100,
    //   title: '优惠券名称',
    //   date: '2025.12.12～2025.12.12',
    //   status: 'unused'
    // },
    // {
    //   amount: 20,
    //   limit: 100,
    //   title: '优惠券名称',
    //   date: '2025.12.12～2025.12.12',
    //   status: 'expired'
    // },
    // {
    //   amount: 20,
    //   limit: 100,
    //   title: '优惠券名称',
    //   date: '2025.12.12～2025.12.12',
    //   status: 'used'
    // }
  ])

  const filteredList = computed(() => {
    if (tabIndex.value === 0) return couponList.value.filter(i => i.status === 'unused')
    if (tabIndex.value === 1) return couponList.value.filter(i => i.status === 'used')
    if (tabIndex.value === 2) return couponList.value.filter(i => i.status === 'expired')
    return []
  })
  onShow(() => {
    getMyCoupon('notuse')
  })
  const tabChange = (tab) => {
    if (tab === 'notuse') {
      tabIndex.value = 0
    } else if (tab === 'used') {
      tabIndex.value = 1
    } else if (tab === 'end') {
      tabIndex.value = 2
    }
    getMyCoupon(tab)
  }
  const getMyCoupon = async (type) => {
    let params = {
      page: 1,
      page_size: 10,
      type: type
    }
    couponList.value = []
    try {

      const res = await API_DISCOUNT_MY_POST(params)
      console.log('getMyCoupon', res)

      if (res.code === 1) {
        if (res.data.data.length > 0) {
          couponList.value = res.data.data;
        } else {
          couponList.value = [];
        }
      } else {
        uni.showToast({ title: res.msg, icon: 'none' })
      }
      console.log('couponList', couponList.value);

    } catch (error) {
      uni.showToast({ title: error.message, icon: 'none' })
    }
  }
</script>

<style lang="scss" scoped>
  @import './index.scss';
</style>
<style>

</style>